<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "repLyContent",
});
</script>
<script setup lang="ts">
import {
  reactive,
  ref,
  toRefs,
  computed,
  watch,
  getCurrentInstance,
} from "vue";
import { Router } from "@/utils/router";
import PopupBottom from "@/components/popup/bottom.vue";
import { comment_add } from "../../api/guider";
import { Toast } from "@/utils/toast";
const emit = defineEmits(["confirm"]);
const visible = ref(false);
const replayContent = ref("");
const textArea = ref<any>("");
const confirmReply = () => {
  Toast.showLoading();
  comment_add({ ...data.value, content: replayContent.value }).then(() => {
    Toast.hideLoading();
    Toast.show("评论成功！待审核");
    visible.value = false;
    emit("confirm");
  });
};
type DataType = {
  relation_id: number;
  nickname: string;
  comment_id: number;
  type: number;
  content?: string;
};
const data = ref<DataType>({} as DataType);
const show = (info: {
  relation_id: number;
  nickname: string;
  comment_id: number;
  type: number;
}) => {
  visible.value = true;
  data.value = info;
  name.value = info.nickname;
};
const name = ref("");
const keyboardData = reactive({ focus: false, height: 0 });
defineExpose({
  show: show,
});
</script>

<template>
  <PopupBottom
    :safeAreaInsetBottom="!keyboardData.true"
    v-model="visible"
    :showClose="false"
    :round="false"
  >
    <view class="replyContent">
      <view class="replyBox">
        <view class="textareaWrap">
          <textarea
              v-if="visible"
            class="textArea"
            v-model="replayContent"
            :placeholder="name"
            focus
            :adjust-position="false"
            @keyboardheightchange="
              (e) => (keyboardData.height = e.detail.height)
            "
          />
        </view>
        <view class="button" @click="confirmReply"> 发送 </view>
      </view>
      <view :style="{ height: `${keyboardData.height}px` }"></view>
    </view>
  </PopupBottom>
</template>

<style lang="scss">
.replyContent {
  width: 100vw;
  height: fit-content;
  box-sizing: border-box;
  padding: 30rpx;
  .replyBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .textareaWrap {
      width: 550rpx;
      height: 170px;
      background: #f6f6f6;
      border-radius: 20rpx;
      .textArea {
        width: 510rpx;
        padding: 20rpx;
      }
    }
    .button {
      width: 120rpx;
      height: 64rpx;
      background: #ff7900;
      border-radius: 32rpx;
      text-align: center;
      line-height: 64rpx;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 64rpx;
    }
  }
}
</style>
